<template>
  <Suspense>
    <template #default>
      <component :is="layoutMap[layout]" />
    </template>
    <template #fallback>
      <div class="app-loader-container">
        <div class="sv-loader"></div>
      </div>
    </template>
  </Suspense>
  <!-- 主题设置 -->
  <AppSetting />
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'
import { useThemeStore } from '@/stores/theme'
import AppSetting from './components/AppSetting/AppSetting.vue'

const layoutMap = {
  classic: defineAsyncComponent(() => import('./LayoutClassic/index.vue')),
  stream: defineAsyncComponent(() => import('./LayoutStream/index.vue')),
  division: defineAsyncComponent(() => import('./LayoutDivision/index.vue')),
  fusion: defineAsyncComponent(() => import('./LayoutFusion/index.vue')),
}

const layout = computed(() => {
  return useThemeStore().layout
})
</script>

<style lang="scss" scoped></style>
